<template>
  <div class="card">
    <nav class="card-nav">
      <ul>
        <li v-for="(item, index) in tagList" :key="index">
          {{ item }}
        </li>
      </ul>
    </nav>
    <main class="card-main">
      <ul>
        <li
          class="wmy-elasticity"
          @click="handleClick(item.href)"
          v-for="(item, index) in websiteData"
          :key="index"
        >
          <h3>{{ item.title }}</h3>
          <p>{{ item.value || "暂无介绍" }}</p>
        </li>
      </ul>
    </main>
  </div>
</template>

<script lang='ts'>
export default {
  props: {
    title: {
      type: String,
      default: "暂无分类",
    },
    tagList: {
      type: Array,
      default() {
        return ["娱乐", "编程", "工具", "美化"];
      },
    },
    websiteData: {
      type: Array,
      default() {
       return [
        
        ];
      },
    },
  },
  data() {
    return {};
  },
  methods: {
    handleClick(href: string) {
      if (!href) return;
      window.open(href);
    },
  },
};
</script>

<style lang='scss' scoped>
.card {
  h2 {
    padding: 0 10px;
    font-size: 16px;
    font-weight: bold;
    background: rgb;
  }
  &-nav {
    background: #ccc;
    ul {
      display: flex;
    }
    li {
      padding: 0 2px;
    }
  }
  &-main {
    ul {
      padding-top: 10px;
      background: rgba(245, 245, 245, 1);
      display: flex;
      flex-wrap: wrap;
      li {
        min-width: 100px;
        max-width: 200px;
        height: 90px;
        margin: 10px;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 50%);
        padding: 10px;
        background: rgba(61, 170, 230, 1);
        h3 {
          font-size: 16px;
        }
        p {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>